
window.onload=function () {
    var json = [
        {   //  1
            width:400,
            top:70,
            left:50,
            opacity:20,
            z:2
        },
        {  // 2
            width:600,
            top:120,
            left:0,
            opacity:60,
            z:3
        },
        {   // 3
            width:800,
            top:100,
            left:200,
            opacity:100,
            z:4
        },
        {  // 4
            width:600,
            top:120,
            left:600,
            opacity:60,
            z:3
        },
        {   //5
            width:400,
            top:70,
            left:750,
            opacity:20,
            z:2
        }
    ];

    var liArr=document.getElementsByTagName('li');
    console.log(liArr.length);
    var arrow=document.getElementById('arrow');
    var leftBtn=arrow.children[0];
    var rightBtn=arrow.children[1];
    var box=document.getElementsByClassName('box')[0];
    var flag;
    box.onmouseover=function(){
        animo(arrow,{"opacity":100});
    };
    box.onmouseleave=function(){
        animo(arrow,{"opacity":0});
    };

    console.log(arrow.children);

    move();//对开始的元素进行样式赋值

    for (var k in arrow.children){
        arrow.children[k].onclick=function () {
            if (this.id==="left"){
                if (flag===true){
                    move(true);
                    flag=false;
                }

            }else{
                if (flag){
                    move(false);
                    flag=false;
                }
            }
        }
    }
    function move(bool) {
        // (操作数组。反向旋转：删除数组中最后一个元素，添加到数组中的第一位)
        //json.push();//在最后添加
        //json.pop();//删除最后一位
        //json.unshift();//在最前面添加
        //json.shift();//删除第一位

        //var ele = json.pop();
        //json.unshift(ele);
        if (bool!==undefined){
            if (bool){

                json.push(json.shift());

            } else{
                json.unshift(json.pop());
            }
        }
        for (var i=0;i<liArr.length;i++){
            animo(liArr[i],{
                "width":json[i].width,
                "top":json[i].top,
                "left":json[i].left,
                "opacity":json[i].opacity,
                "zIndex":json[i].z
            },function () {
                //用回调函数进行设置，必须等到该函数执行完了
                flag=true;

            });
            console.log("222");
        }
    }

    function animo(ele,json,fn) {
        clearInterval(ele.timer);
        ele.timer=setInterval(function () {
            var bool=true;
            for (var k in json){
                var present=0;
                //获取值的方式有两种分为：opacity小数的方式；还有就是px的方式的最后需要进行px赋值
                if (k==='opacity'){
                    present=getStyle(ele,k)*100||0;
                }else{
                    present=parseInt(getStyle(ele,k))||0;
                }

                var space=(json[k]-present)/10;
                space=space>0?Math.ceil(space):Math.floor(space);
                present=present+space;

                if (k==='opacity'){
                    // present=getStyle(ele,k)*100||0;
                    ele.style[k]=present/100;//主流浏览器的赋值方式也只限于opacity
                    ele.style.filter = "alpha(opacity="+present+")";//为了兼容ie678 与上面的一段代码作用一样
                }else if (k==='zIndex'){
                    ele.style[k]=present;
                } else{
                    ele.style[k]=present+'px';//这是带有px的的赋值方式
                }

                if (json[k]!==present){
                    bool=false;
                }
            }
            console.log("看到此消息证明还么有清楚计时器");
            if(bool){
                clearInterval(ele.timer);
                if (fn){
                    fn();
                }
            }
        },20);
    }


    function getStyle(ele,zhi) {
        if (window.getComputedStyle(ele)){
            return window.getComputedStyle(ele,null)[zhi];
        }
        return  ele.currentStyle[zhi];
    }

};

